/*
 * @Author: Drc
 * @Date: 2020-06-16 13:34:42
 * @LastEditors: Drc
 * @LastEditTime: 2021-09-29 10:50:13
 */
import React, {useRef} from 'react'
import {Animated, Platform, View, ViewProps} from 'react-native'
import LinearGradient, {LinearGradientProps} from 'react-native-linear-gradient'
import {KeyboardAwareScrollView, KeyboardAwareScrollViewProps} from 'react-native-keyboard-aware-scroll-view'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import System, {px2dp} from '@path/config/system'
import Theme from '@path/config/theme'
import {useHeaderHeight} from '@react-navigation/elements'
import ThemeText from '@path/components/ThemeComponents/ThemeText'

interface HeaderProps {
  title?: string
  renderLeft?: JSX.Element
  renderRight?: JSX.Element
}
interface ThemeViewProps extends ViewProps {
  isShowNav?: boolean
  isShowStatusBar?: boolean
  backgroundColor?: string
  bg?: JSX.Element
  isUseScrollView?: boolean
  scrollViewProps?: KeyboardAwareScrollViewProps
  isUseHeader?: boolean
  headerOptions?: HeaderProps
  children: any
  linearGradientProps?: LinearGradientProps
}

const Container = (props: ThemeViewProps) => {
  const {style, isShowStatusBar, isShowNav, bg, isUseScrollView, scrollViewProps, linearGradientProps, children} = props

  const inset = useSafeAreaInsets()
  const headerH = useHeaderHeight()
  const statusBarH = inset.top
  const navH = headerH ? headerH - inset.top : System.headerHeight
  const scrollY = useRef(new Animated.Value(0))
  const paddingTop = (isShowStatusBar ? statusBarH : 0) + (isShowNav ? navH : 0)

  const cacheProps: ThemeViewProps = {
    backgroundColor: Theme.getThemeColor('bg'),
  }

  const _renderHeader = () => {
    const opacity = scrollY.current?.interpolate({
      inputRange: [0, statusBarH + navH],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    })

    return (
      <Animated.View
        style={{
          paddingTop: statusBarH,
          width: '100%',
          position: 'absolute',
          height: statusBarH + navH,
          backgroundColor: Theme.getThemeColor('bg'),
          opacity,
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'row',
          paddingHorizontal: Platform.OS === 'ios' ? px2dp(15) : px2dp(5),
        }}>
        {/* 左侧 */}
        <View
          style={{
            flex: 0.2,
            height: '100%',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-start',
          }}>
          {props.headerOptions?.renderLeft}
        </View>
        {/* 中间 */}
        <ThemeText
          style={{
            flex: 0.6,
            textAlign: 'center',
            fontSize: 15,
          }}
          numberOfLines={1}
          lineBreakMode={'tail'}>
          {props.headerOptions?.title || ''}
        </ThemeText>
        {/* 右侧 */}
        <View
          style={{
            flex: 0.2,
            height: '100%',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-end',
          }}>
          {props.headerOptions?.renderRight}
        </View>
      </Animated.View>
    )
  }

  const WrapContainer = (wrapChildren: any) => {
    return linearGradientProps ? (
      <LinearGradient
        style={{flex: 1, paddingTop: isUseScrollView ? 0 : paddingTop, ...style}}
        {...cacheProps.linearGradientProps}
        {...linearGradientProps}>
        {wrapChildren}
      </LinearGradient>
    ) : (
      <View
        style={{
          flex: 1,
          paddingTop: isUseScrollView ? 0 : paddingTop,
          backgroundColor: cacheProps.backgroundColor,
          ...style,
        }}>
        {wrapChildren}
      </View>
    )
  }

  const WrapScrollView = (wrapChildren: any) => {
    const {contentContainerStyle = {}, ...rest} = scrollViewProps

    return isUseScrollView ? (
      <KeyboardAwareScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event([{nativeEvent: {contentOffset: {y: scrollY.current}}}], {useNativeDriver: false})}
        bounces={true}
        contentContainerStyle={{paddingTop, paddingBottom: px2dp(20), ...contentContainerStyle}}
        {...rest}>
        {wrapChildren}
      </KeyboardAwareScrollView>
    ) : (
      wrapChildren
    )
  }
  return WrapContainer(
    <>
      {bg}
      {WrapScrollView(props.children)}
      {props.isUseHeader ? _renderHeader() : null}
    </>,
  )
}

Container.defaultProps = {
  style: {},
  isShowNav: false,
  isShowStatusBar: false,
  bg: undefined,
  isUseScrollView: false,
  scrollViewProps: {},
  isUseHeader: false,
}

export default Container
